<template>
	<div class="dropdown" @click.stop>
		<span class="dropdown-text">{{dataPlaceHolder.text}}</span>
		<!-- <span class="caret"></span> -->
		<span class="dropdown-arrow"></span>
		<select @change="change" name="dataName"  :value="dataPlaceHolder.text">
			<option v-for="option in dataOptions"
					data-value = "{{option.value}}"
					:value="option.text">
					{{option.text}}
			</option>
		</select>
	</div>
</template>
<style lang="sass">
	.dropdown{
		width: 100%;
		position: relative;
		text-align: center;
		.dropdown-text{
			display: inline-block;
			width: 70%;
		}
		select{
			position: absolute;
		    left: 0px;
		    top: 0px;
		    bottom: 0px;
		    width: 100%;
		    opacity: 0;
		    filter:alpha(opacity=0);
		    option{
		    	color: #000;
		    }
		}
	}
</style>
<script >

	export default{
		props:{
			dataOptions:{
				type: Array,
				default: ()=>[]       //[{"value": 1,"text":"good"}]
			},
			dataName: {
				type: String
			},
			dataPlaceHolder: {
				type: Object,
				default: ()=>{}
			}
		},
		methods:{
			change(e){
				let _index,newVal,textVal;

				_index  = e.currentTarget.options.selectedIndex;
				newVal  = e.currentTarget.options[_index].getAttribute("data-value");
				textVal = e.currentTarget.options[_index].text;

				/*console.log(newVal,textVal,_index)*/

				this.$emit("on-change",newVal,textVal,_index);
			}
		},
		ready(){

		}
	}
</script>
